<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Title</title>
<style>
div#content{
    width: 400px;
}

#content > div{
    width: 100%;
    border: 1px solid #000;
}


#inputMessage > input{
    width : 400px;
    
}
#inputMessage > textarea{
    width: 400px;
}

</style>
</head>
<body>
<div id="content">
    
</div>
<div id="inputMessage">
    <input type="text" value="你好"> <br>
    <textarea rows="10" cols="40" >hello world</textarea><br>
    <button>提交</button>
</div>
<script>
var titleInput = document.querySelector("input");
var contentArea = document.querySelector("textarea");
var btn = document.querySelector("button");
var contentDiv = document.getElementById("content");

btn.onclick = function (){
    var title = titleInput.value;
    var content = contentArea.value;
    
    var div = document.createElement("div");
    
    var h2 = document.createElement("h2");
    h2.appendChild(document.createTextNode(title));
    div.appendChild(h2);
    
    var p = document.createElement("p");
    p.appendChild(document.createTextNode(content));
    div.appendChild(p);
    
    var btn = document.createElement("button");
    btn.appendChild(document.createTextNode("删除"))
    btn.onclick = function (){
        // removeChild 删除子元素.
        btn.parentNode.parentNode.removeChild(btn.parentNode);
    }
    div.appendChild(btn)
    
    contentDiv.appendChild(div);
}
</script>
</body>
</html>